<!--
 * @Description: 班级评价统计
 * @Autor: dyx
 * @Date: 2023-02-15 11:32:34
 * @LastEditTime: 2023-02-15 17:05:54
-->
<template>
  <div>
    <Query :type="categoretype" @initData="initData" />
    <!-- <ECharts ref="ECharts" :categore="categore" :categoretype="categoretype" /> -->
    <!-- <div class="title">评价列表</div>
    <JADP-table v-loading="listLoading" :data="list">
      <el-table-column
        v-if="categoretype == 1"
        label="班级名称"
        prop="classname"
      />
      <el-table-column
        v-if="categoretype == 2"
        label="课程名称"
        prop="classname"
      />
      <el-table-column
        v-if="categoretype == 3"
        label="课件名称"
        prop="classname"
      />
      <el-table-column
        v-if="categoretype == 4"
        label="讲师名称"
        prop="classname"
      />
      <el-table-column label="评价类型" prop="categore" />
      <el-table-column label="评价管理名称" prop="managename" />
      <el-table-column label="学员姓名" prop="studentname" />
      <el-table-column label="评价管理总分" prop="score" />
      <el-table-column label="学员评分" prop="grade" />
    </JADP-table>-->
    <div v-if="customShow" class="subject_body">
      <el-card
        shadow="hover"
        class="mysubject"
        v-for="(item, index) in customList"
        :key="index"
      >
        <div class="subject_title">
          <!-- class="font" -->
          <span> {{ index + 1 }}、{{ item.content }}</span>

          <div class="title_right">
            <el-button-group>
              <el-button
                icon="el-icon-full-screen"
                @click="item.openFlag = !item.openFlag"
                >{{ item.openFlag ? "收起" : "展开" }}</el-button
              >
            </el-button-group>
          </div>
        </div>
        <div class="subject_body">
          <!-- <div>{{ item.content }}</div> -->
          <div v-show="item.openFlag">
            <!-- <el-radio-group disabled v-model="item.optionsum.remark"> -->
            <ul>
              <li v-for="(val, inx) in item.optionsum" :key="inx">
                <!-- <el-radio :label="val.id"> -->
                {{ val.index }}.
                <span class="proportion">占比：{{ val.proportion }}</span>
                {{ val.label }}
                <!-- </el-radio -->
                
              </li>
            </ul>
            <!-- </el-radio-group> -->
          </div>
        </div>
      </el-card>
    </div>
    <div v-else>
      <el-row
        class="main_"
        :gutter="30"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-col :span="16" style="height:360px">
          <JADP-table
            :data="list"
            ref="table1"
            class="tb1"
            highlight-current-row
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            @row-click="rowClick"
          >
            <el-table-column label="学员学号" prop="stuno" />
            <el-table-column label="学员姓名" prop="studentname" />
            <el-table-column label="评价总分" prop="totalscore" />
          </JADP-table>
          <pagination
            :total="total"
            :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize"
            @pagination="initData"
          />
        </el-col>
        <el-col :span="8" class="jin-du">
          <div class="jd-circle">
            <div class="round">{{percentage  +'分'}}</div>
            <!-- <el-progress
              :stroke-width="10"
              :width="205"
              :height="205"
              type="circle"
              :percentage="percentage ? percentage : 0"
              style="margin-bottom: 30px"
            ></el-progress> -->
            <h3 >{{categoretype == 1?'班级':categoretype == 3?'课件':categoretype == 4?'教师':''}}评价平均分</h3>
          </div>
        </el-col>
      </el-row>
      <JADP-table v-loading="appraiseListLoading" :data="appraiseList">
        <el-table-column label="评价内容" prop="content" />
        <el-table-column label="评价总分" prop="score" />
        <el-table-column label="学员评分" prop="grade" />
        <el-table-column label="评价时间" prop="creatortime" />
      </JADP-table>
    </div>
  </div>
</template>
<script>
import Query from "./query.vue";
import ECharts from "./eCharts";
import request from "@/utils/request";
import { getEvaluationList } from "@/api/zazx/evaluation.js";
export default {
  name: "classEvaluation",
  components: {
    Query,
    ECharts
  },
  props: {
    categore: {
      type: String,
      default: ""
    },
    categoretype: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 5,
        sort: "desc",
        sidx: "creatortime"
      },
      percentage: 0, //平均分
      appraiseList: [],
      appraiseListLoading: false,
      customShow: false,
      customList: [],
    };
  },
  methods: {
    initData(query) {
      let dataV = {
        classid: query.coursemanageid,
        method: query.manageid,
        // categoretype: query.categoretype,
        categoretype: this.categoretype,
        coursewareid: query.coursewareid,
        teacherid: query.teacherid
      };
      // 自定义评价
      if (query.manageid == "2") {
        this.customShow = true;
        request({
          url: "/api/xy_pj_student/Xy_pj_student/getCustomEvaluation",
          method: "post",
          data: {
            classid: query.coursemanageid,
            categoretype: this.categoretype,
            coursewareid: query.coursewareid,
            teacherid: query.teacherid
          }
        }).then(res => {
          this.customList = res.data;
          // 解析字段
          this.customList.forEach(item => {
            item.optionsum = JSON.parse(item.optionsum);
            item.openFlag = false;
          });
          this.customList = JSON.parse(JSON.stringify(this.customList));
        });
      } else {
        this.customShow = false;
        request({
          url: "/api/xy_pj_student/Xy_pj_student/statisticalEvaluation",
          method: "post",
          data: dataV
        }).then(res => {
          this.list = res.data.list;
          this.total = res.data.pagination.total;
          this.listLoading = false;
        });
        request({
          url: "/api/xy_pj_student/Xy_pj_student/getStaAverage",
          method: "post",
          data: dataV
        }).then(res => {
          this.percentage = res.data;
        });
      }
      // console.log(query, "query55555555555");
      // return
      this.listLoading = true;
      // this.$refs.ECharts.init(query);
      // let query_ = {
      //   ...this.listQuery,
      //   coursemanageid: query.coursemanageid,
      //   manageid: query.manageid,
      //   categore: this.categore,
      //   categoretype: this.categoretype // 1-培训班  2-课程 3-课件  4-讲师
      // };
      // const { data } = await getEvaluationList(query_);
      // this.list = data.list;
      // this.total = data.pagination.total;
      // this.listLoading = false;
      // -------------------------------
    },
    rowClick(row) {
      console.log(row, "row");
      request({
        url: `/api/xy_pj_student/Xy_pj_student/getEvaluationContent/${row.id}`,
        method: "get"
      }).then(res => {
        console.log(res, "res333333333333");
        this.appraiseList = res.data;
      });
    }
  }
};
</script>
<style scoped lang="scss">
*{
  list-style: none;
}
.tb1 {
  //   height: 240px;
  height: 85% !important;
}
.jin-du {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}
.jd-circle {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .round{
    // 圆环
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 30px;
    border: 10px solid #e5e9f2;
    position: relative;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    color: #409eff;


  }
}

.mysubject {
  margin-bottom: 20px;
  width: 100%;
  .subject_title {
    width: 100%;
    .checkbox {
      cursor: pointer;
    }
    .font {
      font-size: 18px;
      font-weight: 600;
    }
    .title_right {
      float: right;
      margin-right: 50px;
      .primary {
        display: inline-block;
        border: 1px solid #b3d8ff;
        background-color: #ecf5ff;
        line-height: 30px;
        font-size: 14px;
        border-radius: 3px;
        color: #409eff;
        margin-right: 5px;
        padding: 0 5px;
      }
    }
  }
  .subject_body {
    width: 100%;
    margin-top: 20px;
    margin-left: 25px;
    line-height: 22px;
    ul {
      margin-top: 20px;
      li {
        line-height: 30px;
        >>> .el-radio__label {
          font-size: 16px;
        }
      }
    }
    .proportion {
      border: 1px solid #ccc;
      font-size: 12px;
      background-color: #f7f7f7;
      padding: 5px;
      border-radius: 3px;
    }
  }
}
</style>
